<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" 
				placeholder="禁止发违规违法群，发现故意发布虚假诈骗群" 
				placeholder-style="color: #999; font-size: 12px;"
				confirm-type="search"
			/>
		</view>
		
		<!-- 广告横幅 -->
		<view class="banner">
			<swiper class="swiper" 
				circular 
				autoplay 
				interval="3000" 
				duration="500"
				indicator-dots
				indicator-color="rgba(255, 255, 255, 0.6)"
				indicator-active-color="#ffffff"
			>
				<swiper-item>
					<image src="/static/banner/banner.jpg" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/banner/banner1.jpg" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 分类导航 -->
		<view class="nav-grid">
			<view class="nav-item">
				<image src="/static/icons/share.png" mode="aspectFit"></image>
				<text>共享群</text>
				<text class="sub-text">选择多</text>
			</view>
			<view class="nav-item">
				<image src="/static/icons/friend.png" mode="aspectFit"></image>
				<text>扩列交友</text>
				<text class="sub-text">交朋友</text>
			</view>
			<view class="nav-item">
				<image src="/static/icons/exchange.png" mode="aspectFit"></image>
				<text>换群广场</text>
				<text class="sub-text">资源变现</text>
			</view>
		</view>
		
		<!-- 群组列表 -->
		<view class="group-list">
			<view class="group-item">
				<image class="group-avatar" src="/static/group-avatar.png" mode="aspectFill"></image>
				<view class="group-info">
					<view class="group-title">一勤工助学服务中心招新群3</view>
					<view class="group-meta">
						<text class="member-count">156人</text>
						<text class="time">1小时前</text>
					</view>
				</view>
				<button class="join-btn">加群</button>
			</view>
			
			<view class="group-item">
				<image class="group-avatar" src="/static/group-avatar.png" mode="aspectFill"></image>
				<view class="group-info">
					<view class="group-title">资源共享人脉群</view>
					<view class="group-meta">
						<text class="member-count">163人</text>
						<text class="time">5小时前</text>
					</view>
				</view>
				<button class="join-btn">加群</button>
			</view>
			
			<view class="group-item">
				<image class="group-avatar" src="/static/group-avatar.png" mode="aspectFill"></image>
				<view class="group-info">
					<view class="group-title">自律打卡群</view>
					<view class="group-meta">
						<text class="member-count">500人</text>
						<text class="time">6小时前</text>
					</view>
				</view>
				<button class="join-btn">加群</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			banners: [
				{ id: 1, image: '/static/banner.jpg' },
				{ id: 2, image: '/static/banner2.jpg' },
				{ id: 3, image: '/static/banner3.jpg' }
			]
		}
	}
}
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.search-box {
	background: #fff;
	padding: 10px 15px;
	position: sticky;
	top: 0;
	z-index: 1;
}

.search-box input {
	background: #f5f5f5;
	padding: 8px 15px;
	border-radius: 20px;
	font-size: 12px;
	width: 100%;
	height: 36px;
	box-sizing: border-box;
	line-height: 20px;
}

.banner {
	padding: 10px 15px;
}

.banner .swiper {
	height: 150px;
	border-radius: 8px;
	overflow: hidden;
}

.banner image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.nav-grid {
	display: flex;
	justify-content: space-around;
	background: #fff;
	padding: 15px;
	margin: 10px 0;
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item image {
	width: 50px;
	height: 50px;
	margin-bottom: 5px;
}

.nav-item text {
	font-size: 14px;
}

.nav-item .sub-text {
	font-size: 12px;
	color: #999;
}

.group-list {
	background: #fff;
}

.group-item {
	display: flex;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #eee;
}

.group-avatar {
	width: 45px;
	height: 45px;
	border-radius: 5px;
	margin-right: 10px;
}

.group-info {
	flex: 1;
}

.group-title {
	font-size: 14px;
	margin-bottom: 5px;
}

.group-meta {
	font-size: 12px;
	color: #999;
}

.member-count {
	margin-right: 10px;
}

.join-btn {
	background: #4cd964;
	color: #fff;
	font-size: 14px;
	padding: 5px 15px;
	border-radius: 15px;
	margin: 0;
}
</style> 